<template>
    <div>
        <v-btn v-hasPermi="['update-user-admin']" prepend-icon="mdi-plus-box" color="green" @click="addClickListener">添加角色</v-btn>
    </div>
    <v-data-table-server :hover="true" :fixed-header="true" :loading="listLoading" :headers="headers" :items="tableList"
        :height="tableHeight" item-value="userId" show-select v-model:items-per-page="roleQuery.pageSize"
        :items-length="total" @update:options="loadItems" items-per-page-text="每页数据量"
        :items-per-page-options="[10, 20, 30, 40, 50, 100]">
        <template v-slot:item.status="{ item }">
            <v-chip :color="item.status == 1 ? 'primary' : 'red'">
                {{ item.status == 1 ? '正常' : '禁用' }}
            </v-chip>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-icon v-hasPermi="['update-user-admin']" class="me-2" icon="mdi-pencil-outline" @click="updateRoleDialog(item)"></v-icon>
            <v-icon v-hasPermi="['update-user-admin']" class="me-2" icon="mdi-delete-outline" @click="deleteRoleDialog(item)"></v-icon>
        </template>
    </v-data-table-server>
    <v-dialog persistent v-model="dialogActionConfig.showDialog" max-width="1000">
        <v-card prepend-icon="mdi-note" :title="dialogActionConfig.title">
            <v-card-text>
                <v-form :readonly="dialogActionConfig.disable">
                    <v-text-field color="primary" v-model="roleObject.roleName" label="名称"></v-text-field>
                    <v-text-field color="primary" v-model="roleObject.remark" label="描述"></v-text-field>
                    <v-autocomplete color="primary" label="拥有权限" multiple :items="permissionList" item-title="remark" 
                        item-value="permissionId" chips v-model="roleObject.permissionIdList" clearable/>
                    <v-radio-group color="primary" label="状态" inline v-model="roleObject.status">
                        <v-radio :value="1" label="正常" />
                        <v-radio :value="0" label="禁用" />
                    </v-radio-group>
                </v-form>
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn text="取消" variant="plain" @click="closeDialog"></v-btn>
                <v-btn color="primary" text="保存" variant="tonal" @click="confirm"></v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import { getPermissionList, getRoleList, simpleRoleCurd } from '@/api/adminAccount';
import { formatTimestamp } from '@/util/ruoyi';

export default {
    emits: ["updateRole"],
    data() {
        return {
            headers: [
                { title: "角色ID", align: "start", key: "roleId", width: '100' },
                { title: "名称", align: "start", key: "roleName" },
                { title: "描述", align: "start", key: "remark" },
                { title: "状态", align: "start", key: "status" },
                { title: "权限数", align: "start", key: "permissionCount" },
                { title: "创建日期", align: "start", key: "createAtStr" },
                { title: "操作", align: "start", key: "actions" },
            ],
            roleQuery: {
                pageSize: 20,
                pageNum: 1,
            },
            roleObject: {status:1},
            tableHeight: 300,
            total: 0,
            listLoading: false,
            tableList: [],
            permissionList:[],
            dialogActionConfig: {
                showDialog: false,
                disable: false,
                title: '',
                loading:false
            }
        }
    },
    mounted() {
        this.tableHeight = window.innerHeight - 64 - 48 - 36 - 75;
        this.getAllPermission()
    },
    methods: {
        loadItems({ page, itemsPerPage }) {
            this.listLoading = true;
            this.roleQuery.pageNum = page;
            this.roleQuery.pageSize = itemsPerPage;
            getRoleList(this.roleQuery).then(resp => {
                this.dataHandle(resp.rows)
                this.listLoading = false
                this.total = resp.total
            })
        },
        dataHandle(dataList) {
            this.tableList = []
            if (dataList == null) return
            dataList.forEach(dataItem => {
                let role = {}
                role.roleId = dataItem.roleId
                role.roleName = dataItem.roleName
                role.remark = dataItem.remark
                role.status = dataItem.status
                if(dataItem.permissions!=null){
                    role.permissionIdList=dataItem.permissionObjectArray.map(permissionItem=>permissionItem.permissionId)
                    role.permissionCount=dataItem.permissions.length
                }
                role.createAtStr = formatTimestamp(dataItem.createAt);
                role.createAt=dataItem.createAt
                this.tableList.push(role)
            });
        },
        confirm(){
            this.roleObject.curdAction=this.dialogActionConfig.action
            this.dialogActionConfig.disable=true
            simpleRoleCurd(this.roleObject).then(resp=>{
                if(resp.code===1){
                    this.closeDialog()
                    this.$emit('updateRole')
                    this.loadItems({ page:this.roleQuery.pageNum, itemsPerPage:this.roleQuery.pageSize })
                }
            }).catch(()=>this.dialogActionConfig.disable=false)
        },
        getAllPermission(){
            getPermissionList({}).then(resp => {
                this.permissionList=resp.rows
            })
        },
        addClickListener() {
            this.dialogActionConfig.title='添加角色'
            this.dialogActionConfig.action='save'
            this.dialogActionConfig.showDialog = true
        },
        closeDialog() {
            this.roleObject={}
            this.dialogActionConfig = { action: 'save', title: '添加角色', showDialog: false }
        },
        deleteRoleDialog(data) { 
            this.roleObject=data
            this.dialogActionConfig.title='删除角色：'+data.roleName
            this.dialogActionConfig.action='delete'
            this.dialogActionConfig.showDialog=true
            this.dialogActionConfig.disable=true
        },
        updateRoleDialog(data) { 
            this.roleObject=data
            this.dialogActionConfig.title='编辑角色：'+data.roleName
            this.dialogActionConfig.action='update'
            this.dialogActionConfig.showDialog=true
        },
    },
}
</script>

<style></style>